Skip to main content

webpack basic

前言

在webpack中,任何文件都可以通过import导入,前提是设置了对应的Loader 例如:

import { getBlogPosts } from "./data";
import "./style.css";
import HeroImage from "./assets/images/hero.jpeg";
import "./test/date/printDate";

在打包过程中,可以通过插件干预打包过程

  plugins: [
new HtmlWebpackPlugin({
title: "博客列表",
}),
new BundleAnalyzerPlugin(),
]
  • 安装依赖
yarn add webpack webpack-cli --dev

# or
yarn install

因为只需要在开发的时候用到webpack,所以安装到Devdependencies即可

  • 安装loader
yarn add css-loader style-loader
  • 执行打包
npx webpack

示例配置文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: "./src/index.js", //entry file name
output: {
filename: "[name].[content-hash].js", //output file name
path: path.resolve(__dirname, "dist"), //output file directory
},
resolve: {
alias: {
utils: path.resolve(__dirname, "src/utils"),//指定路径别名
},
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
devServer: {
static: "./dist",
},
plugins: [
//HtmlWebpackPlugin will auto generate index html file
new HtmlWebpackPlugin({
title: "博客列表",
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"], //use css-loader to support import css file
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, //webpack native support import picture file, so don't need to config loader
type: "asset/resource",
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",//use babel-loader to convert js file
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
};